<template>
    <div>
        <div id="content index-content">
            <div class="class-content">
                <div class="class-content-search">
                    <input type="text" class="search-text" v-model="searchName">
                    <div class="class-content-search-btn">
                        <input type="submit" value="Debug" class="s_btn" v-on:click="searchDown">
                    </div>
                </div>
                <div class="search-logo">
                    <img src="/static/img/linkphp.png" />
                </div>
                <div class="class-content-item">
                    <a href="http://links.linkphp.cn" target="_blank" class="co-title active">Links框架</a>
                    <a href="javascript:;" class="co-title" v-on:click="vip">开通VIP</a>
                    <a href="javascript:;" class="co-title active" v-on:click="forum">技术问答</a>
                    <a href="http://github.com/liugene/linkphp" target="_blank" class="co-title">GitHub仓库</a>
                </div>
                <div class="class-content-font">当前类库大小：<span class="layui-badge layui-bg-green"> 15</span>个 | 最新更新于:
                    <span class="layui-badge layui-bg-blue">2017-09-19</span>
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
        <!-- 首页中间  -->
        <div id="center">
            <div class="center-box">
                <div class="center-show active" ref="center" v-for="(item,index) in Items" v-if="index % 2 == 0">
                    <div class="right-repeat-img">
                        <img src="/static/img/photo.png">
                        </div>
                    <div class="center-talk-right">
                        <div class="right-repeat-title">
                            <a href="javascript:;">{{ item.title }}</a>
                            </div>
                        <div class="right-repeat-dec">
                            <p class="p">{{ item.content }}</p>
                            </div>
                        <img src="/static/img/talk.png">
                        </div>
                    </div>
                <div class="center-show active" v-else>
                    <div class="left-repeat-img">
                        <img src="/static/img/photo.png">
                        </div>
                    <div class="center-talk-left">
                    <div class="left-repeat-title">
                        <a href="javascript:;">{{ item.title }}</a>
                        </div>
                    <div class="left-repeat-dec">
                        <p class="p">{{ item.content }}</p>
                        </div>
                    <img src="/static/img/talk-repeat.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import request from '../link/request.js'
export default {
  name: 'Index',
  data () {
    return {
      Items: {},
      searchName: ''
    }
  },
  mounted () {
    this.getThisData()
  },
  methods: {
    getThisData () {
      let that = this
      request.get('/index.php/main/blog/getBlogList')
        .then(function (response) {
          console.log(response)
          that.Items = response
        })
    },
    searchDown () {
      let that = this
      console.log(that.searchName)
      that.redirect('library')
    },
    vip () {
      this.redirect('vip')
    },
    forum () {
      this.redirect('forum')
    }
  }
}
</script>

<style scoped>
@import "../assets/css/index.css";
</style>
